<template>
  <div class="myHomeBrand center">
    <!-- 热门品牌模块 -->
    <div class="myHomeBrands">
      <!--  -->
      <my-title name="热门品牌" desc="国际经典 品质保证">
        <template #button>
          <button
            :style="i == 1 ? 'background-color: #0094ff;' : ''"
            class="left iconfont icon-xiangzuojiantou"
            :class="i == 0 ? 'disabled' : ''"
            @click="i = 0"
          ></button
          ><button
            :class="i == 1 ? 'disabled' : ''"
            :style="i == 0 ? 'background-color: #0094ff;' : ''"
            class="right iconfont icon-xiangyoujiantou"
            @click="i = 1"
          ></button>
        </template>
      </my-title>
      <div class="box">
        <ul :style="'transform:translateX(' + -i * 50 + '%)'">
          <li v-for="item in brandData" :key="item.id">
            <img :src="item.picture" alt="" />
            <!-- <el-image :src="item.picture" lazy></el-image> -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import myTitle from "@/components/communal/myTitle.vue";
import { getHomeBrand } from "@/api/home/home";
export default {
  props: {},
  name: "myBrand",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      brandData: [],
      i: 0,
    });
    getHomeBrand().then((res) => {
      // console.log(res);
      data.brandData = res.result;
    });
    return { ...toRefs(data) };
  },
  components: {
    myTitle,
  },
};
</script>
<style lang="scss">
/* 如果不想样式污染  就加个scoped */
.myHomeBrand {
  background-color: #f5f5f5;
  .myHomeBrands {
    width: 1240px;
    margin: 0 auto;
    overflow: hidden;
    .box {
      display: flex;
      width: 100%;
      height: 345px;
      overflow: hidden;
      padding-bottom: 40px;
    }
    ul {
      width: 200%;
      display: flex;
      transition: all 1s;
      li {
        cursor: pointer;
        width: 240px;
        margin-right: 10px;
        height: 345px;
        img {
          height: 100%;
          height: 305px !important;
        }
      }
    }
    .left,
    .right {
      width: 20px;
      height: 20px;
      display: inline-block;
      text-align: center;
      line-height: 20px;
      margin-left: 10px;
      outline: none;
      border: none;
      color: #fff;
      &.disabled {
        cursor: not-allowed;
      }
    }
  }
}
</style>